<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="整托拣货" left-arrow @click-left="$router.go(-1)"></van-nav-bar>

		<div class="goodsFromWarp" style="padding-bottom:5px;">
			<div class="goodsFromTwo" >
					<div class="goodsInputWarp">
							<div class="goodsInputLabel" style="width:35%;">
								<div class="goodsInputBorder"></div>
								<div class="skuName" >位置：</div>
							</div>
							<van-field
								 class="skuInput"
								 clearable
								 v-model="editForm.hqp"
								 placeholder="请填写位置"
							 />
							 <div class="searchBtn">
								<button :disabled="isdisabled"  @click.stop="_getAddressBtn()" >
									<van-icon name="ellipsis" color="#1989fa"  />
								</button>
							 </div>
					</div>
			</div>



			<div class="storeWarp" >
				<van-row class="goodsName">
				  <van-col span="24"> <span>拣货任务：</span>{{skuRow.bill}}</van-col>
				</van-row>

				<van-row class="goodsName">
				  <van-col span="24"> <span>门店：</span>{{skuRow.ck_storeid}} {{skuRow.ck_storeid>''?'_':''}} {{skuRow.storename}}</van-col>
				</van-row>

				<van-row class="goodsName">
				  <van-col span="24"> <span>集货位：</span>{{skuRow.wno}}</van-col>
				</van-row>

				<van-row class="goodsName">
				  <van-col span="24"> <span>仓位：</span>{{skuRow.cwno.slice(0,4)}} - {{skuRow.cwno.slice(4,6)}} - {{skuRow.cwno.slice(6,8)}} </van-col>
				</van-row>
			</div>




      <div class="goodsInputWarp">
        <div class="goodsInputLabel" style="width:35%;">
          <div class="goodsInputBorder"></div>
          <div class="skuName" >拣货标签：</div>
        </div>
        <van-field
            class="skuInput"
            clearable
            @keyup="onEnter($event,do_inputspbarJhrd)"
            v-model="editForm.jhrqid"
            placeholder="请填写拣货标签"
            ref="jhrqidInput"
          />
      </div>

		</div>




		<div class="savefooterBtn">
			<van-button   type="info" :disabled="isdisabled" @click="lingquBtn()">领取任务</van-button>
      <van-button style="margin-left:20px;" type="info" :disabled="isdisabled" @click="saveRenWuBtn()">任务完成</van-button>
		</div>

    <div class="carCardWarp">
			<div class="carCard" v-for="(item) in tableDataGoods" :key="item.barcode">
				<van-row class="goodRow" >
				  <van-col span="24"> <span>条码:</span>{{item.barcode}}</van-col>
				</van-row>

				<div class="goodsTitleRow">
						<div class="goodsTitleLabel">
							<div class="skuName">商品：</div>
						</div>
						<div class="skuNoTitle">
						{{item.subsname}}
						</div>
				</div>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="12"> <span>拣货类型:</span>{{item.spcwlx}}</van-col>
				  <van-col span="12"> <span>库存:</span>{{item.tkc}} {{item.username}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;margin-bottom: 0px;">
				  <van-col span="12"> <span>已分配:</span>{{item.tkcfp}}{{item.username}}</van-col>
				  <van-col span="12"> <span>签号:</span>{{item.shserno}}</van-col>
				</van-row>

			</div>
		</div>

		<!-- 地址弹窗 -->
		<van-overlay :show="isAddressVisible" :lock-scroll="false">
			<div class="shipandanWrapper">
					<van-sticky>
						<van-nav-bar class="navBar" title="位置列表" left-arrow @click-left="isAddressVisible = false"></van-nav-bar>
					</van-sticky>
					<div class="shipandanCon" @click.stop>
							<div  v-for="(row,i) in addressData" :key="i" class="danjuRow" @click="selectAddressClick(row,i)" >
								<van-row class="skuList" >
								  <van-col span="24"> <span>货区排：</span> {{row.hqp}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>区：</span> {{row.q_no}}</van-col>
									<van-col span="12"> <span>通道：</span> {{row.p_no}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>七层总数：</span> {{row.qczs}}</van-col>
									<van-col span="12"> <span>四层：</span> {{row.sczs}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="24"> <span>仓位自：</span> {{row.cwno_f}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="24"> <span>七层总数：</span> {{row.qczs}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="24"> <span>四层总数：</span> {{row.sczs}}</van-col>
								</van-row>


							</div>
					</div>
			</div>
		</van-overlay>


    <!-- 拣货任务弹窗 -->
    <van-overlay :show="isRenWuVisible" :lock-scroll="false">
			<div class="shipandanWrapper">
					<van-sticky>
						<van-nav-bar class="navBar" title="拣货任务列表" left-arrow @click-left="isRenWuVisible = false"></van-nav-bar>
					</van-sticky>
					<div class="shipandanCon" @click.stop>
							<div  v-for="(row,i) in tableData" :key="i" class="danjuRow" @click="selectRenWuClick(row,i)" >
								<van-row class="skuList" >
								  <van-col span="24"> <span>拣货任务：</span> {{row.bill}}</van-col>
								</van-row>

								<van-row class="skuList" >
								  <van-col span="24"> <span>门店：</span> {{row.storeid}}{{row.storeid >''?'_':''}}{{row.storename}}</van-col>
								</van-row>

								<van-row class="skuList" >
								  <van-col span="24"> <span>出货仓位：</span> {{row.route_c}}</van-col>
								</van-row>
								<van-row class="skuList" >
								  <van-col span="12"> <span>集货位：</span> {{row.wno}}</van-col>
								  <van-col span="12"> <span>仓库：</span> {{row.whsid}}</van-col>
								</van-row>


								<van-row class="skuList"  >
									<van-col span="12"> <span>区：</span> {{row.q_no}}</van-col>
									<van-col span="12"> <span>排：</span> {{row.p_no}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>出货总数：</span> {{row.yjtotqty}}</van-col>
									<van-col span="12"> <span>托盘总数：</span> {{row.tqty}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>箱数：</span> {{row.pack}}</van-col>
									<van-col span="12"> <span>散数：</span> {{row.qty}}</van-col>
								</van-row>
							</div>
					</div>
			</div>
		</van-overlay>

	</div>
</template>

<script>

export default {
  name: 'zhengtuojianhuo',
  data() {
    return {
			editForm:{
				hqp:'',
				route_c:'',
				q_no:'',
				p_no:'',
        jhrqid:'',
			},
			isAddressVisible:false,
			isdisabled:false,
			lingquData:[],
			isSkuVisible:false,
			addressData:[],
			tableData:[],
			skuRow:{
        bill: "",
				ck_storeid: "",
				cwno: "",
				p_no: "",
				pack: "",
				q_no: "",
				qty: "",
				route_c: "",
				sort1: "",
				storeid: "",
				storename: "",
				tqty: "",
				whsid: "",
				wno: "",
				yjtotqty: "",
      },
			isRenWuVisible:false,
			tableDataGoods:[]
		};
  },
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
		// 获取位置
		_getAddressBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_jianhuo',
				'i':this.FNULLE([
				'opmode','ZTJH_qrywz',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				])
				}, '获取位置',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log(rtn_json_obj)
					_self.addressData = rtn_json_obj;
					_self.isAddressVisible = true;
				}
			});
		},
		// 选择地址
		selectAddressClick(row,i){
			this.editForm.hqp = row.hqp;
			this.editForm.q_no = row.q_no;
			this.editForm.p_no = row.p_no;
			this.editForm.cwno_f = row.cwno_f;
			this.editForm.cwno_t = row.cwno_t;
			this.isAddressVisible = false;
		},
		lingquBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'}]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_jianhuo',
				'i':this.FNULLE([
				'opmode','ZTJH_lqbill',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'route_c',_self.editForm.route_c,
				'q_no',_self.editForm.q_no,
				'p_no',_self.editForm.p_no,
				])
				},'查询领取任务',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("查询查询领取任务")
					console.log(rtn_json_obj)
					_self.tableData = rtn_json_obj
					if(_self.tableData.length > 0 ){
							_self.tableData = rtn_json_obj
							_self.isRenWuVisible = true
					}else{
						_self.$toast.fail('暂无拣货任务')

					}
				}
			});
		},
    selectRenWuClick(row){
      this.skuRow = row
      this.isRenWuVisible = false;
      this._getGoods()
      this.$nextTick(() => {
        if (this.$refs.jhrqidInput) {
          this.$refs.jhrqidInput.focus()
        } else {
          console.log('拣货标签输入框不存在')
        }
      })
    },
    _getGoods(){
      var _self = this;
      var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_jianhuo',
				'i':this.FNULLE([
				'opmode','ZTJH_qryitem',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'whsid',_self.skuRow.whsid,
				'cwno',_self.skuRow.cwno,
				])
				},'查商品',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.tableDataGoods = rtn_json_obj
					// _self.isStoreVisible = true
					console.log("得到查商品")
					console.log(rtn_json_obj)
				}
			});
    },
    do_inputspbarJhrd(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.jhrqid = pmtxt
			this.saveRenWuBtn()
		},
    saveRenWuBtn(){
      console.log(this.skuRow)
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_jianhuo',
				'i':this.FNULLE([
				'opmode','ZTJH_qritem',
          'kqid', _self.ryuser.kqid,
          'czyid',_self.ryuser.operatorid,
          'bill',_self.skuRow.bill,
          'cwno',_self.skuRow.cwno,
          'tqty',_self.skuRow.tqty,
          'renwuid',_self.skuRow.renwuid,
          'jhrqid',_self.editForm.jhrqid,
				])
				},'查保存任务',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					// _self.tableDataGoods = rtn_json_obj
					console.log("得到查保存任务")
					console.log(rtn_json_obj)
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast.fail(rtn_json_obj[0].ret_mess)
						return
					}else{
						_self.$toast.fail(rtn_json_obj[0].ret_mess)
						_self.editForm.jhrqid = ''
						_self.editForm.ck_storeid = ''
						_self.editForm.hqp = ''
            _self.tableDataGoods = []
						_self.skuRow = {
							bill: "",
							ck_storeid: "",
							cwno: "",
							p_no: "",
							pack: "",
							q_no: "",
							qty: "",
							route_c: "",
							sort1: "",
							storeid: "",
							storename: "",
							tqty: "",
							whsid: "",
							wno: "",
							yjtotqty: "",
						}
					}
				}
			});
		},
    resetAll(){
      var _self = this;
      _self.editForm = {
        hqp:'',
				route_c:'',
				q_no:'',
				p_no:'',
        jhrqid:'',
      }
      _self.skuRow = {
        bill: "",
        ck_storeid: "",
        cwno: "",
        p_no: "",
        pack: "",
        q_no: "",
        qty: "",
        route_c: "",
        sort1: "",
        storeid: "",
        storename: "",
        tqty: "",
        whsid: "",
        wno: "",
        yjtotqty: "",
      }
      _self.editForm.jhrqid = ''
      _self.editForm.ck_storeid = ''
      _self.tableDataGoods = []
    }
  },
  mounted() {

  },
	components: {

	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}


	.savefooterBtn{
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
		box-sizing: border-box;
		padding-right: 20px;
		button{
			border-radius: 20px;
			width: 100px;
			height: 35px;
			font-family: -apple-system-font, sans-serif;
			line-height: normal; /* 重点：设置内容行高为 normal */
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center
		}
	}


	div.storeWarp{
		font-size: 20px;
		font-weight: bold;
		.goodsName{
			margin-top:10px;
			margin-bottom: 10px;
			span{
				display: inline-block;
				width:100px;
			}
		}

	}



div.carCardWarp{
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
	div.carCard{
		border-left: 5px solid #4998FF;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		border-radius:5px;
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom:15px;
		div.goodRow{
			margin-bottom:8px;
			span{
				display: inline-block;
				width:90px;
			}
		}
		div.goodsTitleRow{
			display: flex;
			width: 100%;
			div.goodsTitleLabel{
				width: 90px;
			}
			div.skuNoTitle{
				width: calc(100% - 90px);
			}
		}
	}
}
</style>
